<template>
	<div class="root">
		<div class="container" v-if="false">
			<div class="title">
				<p>BackHab</p>
				<p>水中背部疼痛疗法</p>
			</div>
			<van-swipe :loop="false" :width="200" :show-indicators="false" @change="onChange">
			  <van-swipe-item v-for="(item,index) in imageList" :key='index'>
					<div :class="current == imageList.length-1?'lastimg':current == index?'swiper':'no-swiper'">
						<img :src="item.url" :alt="item.alt">
					</div>
				</van-swipe-item>
			</van-swipe>
			<div class="audio" v-for="(item,index) in audioList" :key="index">
				<div class="play"><i class="iconfont icon-triangle-right"></i></div>
				<div class="audio-item">
					<p>{{item.serial}} {{item.name}}</p>
					<span>{{item.duration}}</span>
				</div>
			</div>
		</div>
		<van-overlay :show="show"  v-if="false">
		  <div class="wrapper" @click.stop>
				<div class="text">
					<span>Hi!</span>
					<p>工作人员正在努力完善内容，</p>
					<p>请耐心等候...</p>
				</div>
		    <!-- <img src="http://qnkf.laigl.com/mobilepng/action_work.png" alt=""> -->
				img
		  </div>
		</van-overlay>
		<img src="http://qnkf.laigl.com/20210420/actionlogo1.png" alt="">
		<img src="http://qnkf.laigl.com/20210420/actionlogo.png" alt="" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
	<footer-comp></footer-comp>
	</div>
</template>

<script>
export default{
	data(){
		return{
			current:0,
			show:false,
			imageList:[
				{
					url:'https://tse2-mm.cn.bing.net/th/id/OIP.dpnKP2REIcYzKO_x4RL4gQHaLH?w=200&h=300&c=7&o=5&pid=1.7',
					alt:'动作图片1'
				},
				{
					url:'https://tse4-mm.cn.bing.net/th/id/OIP.kANAYmxePx15dmK9XWKMTgHaNK?w=187&h=333&c=7&o=5&pid=1.7',
					alt:'动作图片2'
				},
				{
					url:'https://tse3-mm.cn.bing.net/th/id/OIP.J-ADOLEpx4KTTwrIdHJUDgHaMW?w=193&h=322&c=7&o=5&pid=1.7',
					alt:'动作图片3'
				},
				{
					url:'',
					alt:''
				}
			],
			audioList:[
				{
					name:'腰背康复',
					serial:'第一节',
					duration:'5分30秒'
				},
				{
					name:'腰背康复',
					serial:'第二节',
					duration:'6分30秒'
				},
				{
					name:'腰背康复',
					serial:'第三节',
					duration:'5分30秒'
				}
			]
		}
	},
	methods:{
		onChange(index){
			this.current = index
		}
	},
	created() {
		this.show = true
	}
}
</script>

<style scoped lang="less">
	.root{
		background: #7F7F7F;
		height: 100vh;
		.container{
			margin-top: 1rem;
			margin-left: 1rem;
			.title{
				margin-left: 1rem;
				p:nth-of-type(1){
					font-size: 1.8rem;
					font-weight: 700;
				}
				p:nth-of-type(2){
					font-size: 1.2rem;
					font-weight: 600;
					margin-bottom: .5rem;
				}
			}
			.van-swipe-item{
				height: 18rem;
				padding-left: 1rem;
				padding-top: 1rem;
				margin-bottom: 1rem;
				.lastimg,.no-swiper{
					width: 10rem;
					height: 14rem;
					border-radius: 1rem;
					transition: all .5s;
					transform: scale(0.8);
					overflow: hidden;
					margin-left: -1rem;
				}
				.lasttwo{
					width: 12rem;
					height: 15.5rem;
					overflow: hidden;
					border-radius: 1rem;
					transform: scale(1);
					transition: all .5s;
					box-shadow: .2rem .2rem 1rem #66728A;
					img{
						object-fit: fill;
					}
				}
				.swiper{
					width: 12rem;
					height: 15.5rem;
					overflow: hidden;
					border-radius: 1rem;
					transform: scale(1);
					transition: all .5s;
					box-shadow: .2rem .2rem 1rem #66728A;
					img{
						object-fit: fill;
					}
				}
			}
			.audio:nth-last-of-type(1){
				border: none;
			}
			.audio{
				box-sizing: border-box;
				width: 100%;
				height: 5.5rem;
				padding: 1rem 0;
				border-bottom: 1px solid #E3E4E9;
				.play,.audio-item{
					display: inline-block;
					vertical-align: top;
				}
				.audio-item{
					margin-left: 1rem;
					p{
						margin-top: .3rem;
						font-size: 1.1rem;
						font-weight: 600;
						margin-bottom: .1rem;
					}
					span{
						color: #E3E4E9;
					}
				}
				.play{
					width: 3.5rem;
					height: 3.5rem;
					background: #E3E4E9;
					text-align: center;
					line-height: 3.5rem;
					border-radius: 2rem;
					i{
						font-size: 2.2rem;
					}
				}
			}
		}
		img:nth-of-type(1){
			width: 100%;
		}
		img:nth-of-type(2){
			width: 60%;
		}
	}
</style>
